<template>
  <div>
    <section class="flex mt16">
      <div class="num_left pd8_13">
        <div class="num_ts">
          <el-tooltip class="item"
                      effect="dark"
                      content="当年赞助/定制会议：自然年内已经赞助/定制的会议场数
可用自助会议：会员有效期内的自助会议的权限剩余数
可发布视频：会员有效期内的可发布视频的权限剩余数
视频总量：会员所有已经上传且审核通过的视频的总数量"
                      placement="top">
                      <div slot="content" style="line-height: 24px;" v-html="ipContent"></div>
            <i class="el-icon-warning num_icon"></i>
          </el-tooltip>
        </div>
        <div class="flex">
          <div class="num_list">
            <span class="num_ber">
              <span class="fs30 pointer" @click="gohrefSelf(4)">{{
                setCompanyData.sponsorMeetNum
                  ? setCompanyData.sponsorMeetNum
                  : "0"
              }}</span>&nbsp;场
            </span>
            <span class="num_ms">当年赞助会议</span>
          </div>
          <div class="num_list">
            <span class="num_ber">
              <span class="fs30 pointer" @click="gohrefSelf(5)">{{
                setCompanyData.customMeetNum
                  ? setCompanyData.customMeetNum
                  : "0"
              }}</span>&nbsp;场
            </span>
            <span class="num_ms">当年定制会议</span>
          </div>
          <div class="num_list">
            <span class="num_ber">
              <span class="fs30 pointer" @click="gohrefSelf(1)">{{
                setCompanyData.selfMeetNum
                  ? setCompanyData.selfMeetNum - setCompanyData.selfMeetUsedNum
                  : "0"
              }}</span>&nbsp;场
            </span>
            <span class="num_ms">可用自助会议</span>
          </div>
          <div class="num_list">
            <span class="num_ber">
              <span class="fs30 pointer" @click="gohrefSelf(2)">{{
                setCompanyData.selfVideoNum
                  ? setCompanyData.selfVideoNum -
                    setCompanyData.selfVideoUsedNum
                  : "0"
              }}</span>&nbsp;个
            </span>
            <span class="num_ms">可发布视频</span>
          </div>
          <div class="num_list">
            <span class="num_ber">
              <span class="fs30 pointer" @click="gohrefSelf(3)">{{
                setCompanyData.videoNum ? setCompanyData.videoNum : "0"
              }}</span>&nbsp;个
            </span>
            <span class="num_ms">视频总量</span>
          </div>
        </div>
      </div>
      <div class="num_right">
        <h4>公告/通知</h4>
        <div class="list">
          <vue-seamless-scroll :data="noticeData"
                               class="seamless-warp"
                               :class-option="classOption2">
            <ul class="scroll-item">
              <div class="gg_list sl1"
                   v-for="item in noticeData"
                   :key="item.title"
                   @click="gohref(item)">
                <span class="gg_dian"></span>
                {{ item.title }}
              </div>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import api from "@/api";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: { vueSeamlessScroll },
  data () {
    return {
      noticeData: [],
      classOption2: {
        step: 0.2, // 值越大滚动越快
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        limitMoveNum: 4, // 开启无缝滚动的数据量 设置(数值<=页面展示数据条数不滚)
      },
      ipContent:'当年赞助/定制会议：自然年内已经赞助/定制的会议场数<br>可用自助会议：会员有效期内的自助会议的权限剩余数<br>可发布视频：会员有效期内的可发布视频的权限剩余数<br>视频总量：会员所有已经上传且审核通过的视频的总数量'
    };
  },
  computed: {
    setCompanyData () {
      return this.$store.getters.companyData;
    },
  },
  mounted () {
    this.getNotice();
  },
  methods: {
    gohrefSelf(val){
      if(val==1){
        this.$router.push('/selfCreate/selfMeting')
      }
      if(val==5){
        this.$router.push('/custoMade/index')
      }
      if(val==4){
        this.$router.push('/support/index')
      }
      if(val==2||val==3){
        this.$router.push('/video/videolist')
      }

    },
    async getNotice () {
      let form = await api.home.getNotice();
      try {
        this.noticeData = form.data;
      } catch (error) {
      }
    },
    gohref(val){
      if (val.jumpUrl.indexOf('http')==-1) {
        val.jumpUrl='https://'+val.jumpUrl
      }
      window.open(val.jumpUrl,'_blank')
    }
  },
};
</script>

<style lang="scss" scoped>
.pointer{
  cursor: pointer;
}
.pd8_13 {
  padding: 8px 13px;
}
.num_left {
  flex: 1.97;
  background: #fff;
  margin-right: 16px;
  height: 137px;
  .num_ts {
    text-align: right;
    margin-bottom: 19px;
    .num_icon {
      font-size: 16px;
      color: #3333334d;
    }
  }
  .num_list {
    flex: 1;
    text-align: center;
    .num_ber {
      font-size: 14px;
      font-weight: 600;
      color: #2864f6;
      line-height: 18px;
      display: inline-block;
      margin-bottom: 30px;
    }
    .num_ms {
      display: block;
      font-size: 14px;
      font-weight: 400;
      color: #7e8790;
      line-height: 20px;
    }
  }
}
.num_right {
  flex: 1;
  padding: 16px 12px;
  background: #fff;
  h4 {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    line-height: 19px;
  }
  .list {
    height: 90px;
    overflow: hidden;
    margin-top: 10px;
  }
  .gg_list {
    margin-top: 7px;
    font-size: 14px;
    color: #7e8790;
    line-height: 22px;
    width: 22.91vw;
    cursor: pointer;
    .gg_dian {
      display: inline-block;
      width: 5px;
      height: 5px;
      background: #7e8790;
      border-radius: 50%;
      margin-right: 2px;
      margin-left: 5px;
      margin-bottom: 3px;
    }
  }
}
.ts_body {
  @include flex(row, center, space-between);
  padding: 8px 16px;
  background: #e7f2fe;
  border-radius: 2px 2px 2px 2px;
  border: 1px solid #0c7ff280;
  margin-top: 16px;
  .ts_icon {
    font-size: 14px;
    color: #0c7ff2;
    display: inline-block;
    padding-right: 5px;
  }
  .ts_text {
    font-size: 14px;
    color: #4f5862;
    line-height: 16px;
  }
  .ts_icon_close {
    font-size: 14px;
    color: #0c7ff2;
  }
}
</style>